<template>
  <div class="wyMap-b">
    <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
      <!--点-->
      <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">
        <!--提示信息-->
        <bm-info-window :show="map.show">Hello~</bm-info-window>
      </bm-marker>
    </baidu-map>

    <div class="nltj-box">
      <div v-for="(item,index) in cardList" :key="index" class="item-box">
        <span class="title">{{item.text}}</span>
        <span class="value">{{item.value}}</span>
      </div>
    </div>

    <div class="rktj-box">
      <zzrkChar style="width:100%;height:100%;padding:0.8vw" :charData="charData"></zzrkChar>
      <div class="index-title" style="position: absolute;right: 0;top:0.1vw">单位：人</div>
    </div>

    <div class="hjly-box">
      <div class="index-title" style="position: absolute;left: 11px;top:0">设备情况</div>
      <el-table
        :stripe="true"
        :data="tableData"
        class="hjly-table"
        :header-cell-style="getRowClass"
        :row-style="rowStyle"
      >
        <el-table-column label="地址" prop="date"></el-table-column>
        <el-table-column label="设备数量" width="150%" prop="name"></el-table-column>
        <el-table-column label="正常数量" width="150%" prop="name"></el-table-column>
        <el-table-column></el-table-column>
      </el-table>
      <div class="hjly-select">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>

    <div class="zdcs-box">
      <zdcsChar style="width:100%;height:100%;padding:0.8vw"></zdcsChar>
      <div class="index-title" style="position: absolute;right: 0;top:0.1vw">单位：人</div>
    </div>

    <div class="clzk-box">
      <carChar style="width:100%;height:100%;padding:0.8vw" :charData="charData"></carChar>
      <div class="index-title" style="position: absolute;right: 0;top:0.1vw">单位：辆</div>
    </div>

    <div class="jdjz-box">
      <div class="index-title" style="position: absolute;left: 11px;top:0">酒店居住人员情况</div>
      <el-table
        :stripe="true"
        :data="tableData"
        class="hjly-table"
        :header-cell-style="getRowClass"
        :row-style="rowStyle"
      >
        <el-table-column label="户籍省份" prop="date"></el-table-column>
        <el-table-column label="户籍城市" prop="name"></el-table-column>
        <el-table-column label="入住人数" prop="name"></el-table-column>
        <el-table-column></el-table-column>
      </el-table>
      <div class="hjly-select">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
 
<script>
import zdcsChar from "../chars/zdcsChar.vue";
import carChar from "../chars/carChar5.vue";
import zzrkChar from "../chars/zzrkChar.vue";

export default {
  components: {
    zdcsChar,
    zzrkChar,
    carChar
  },
  name: "demo",
  data: () => ({
    map: {
      center: { lng: 113.262851, lat: 23.253817 },
      zoom: 18,
      show: true,
      dragging: true
    },
    infoImg: require("../../assets/clMap/tz.png"),
    charData: [148, 300, 400, 556, 758, 898, 220, 162, 60, 50],
    tableData: [
      {
        date: "1231231-05-02",
        name: "20",
        address: "上海市普陀区金沙江路 1518 弄"
      },
      {
        date: "2016-05-04",
        name: "20",
        address: "上海市普陀区金沙江路 1517 弄"
      },
      {
        date: "2016-05-01",
        name: "20",
        address: "上海市普陀区金沙江路 1519 弄"
      },
      {
        date: "2016-05-03",
        name: "20",
        address: "上海市普陀区金沙江路 1516 弄"
      },
      {
        date: "201116-05-03",
        name: "20",
        address: "上海市普陀区金沙江路 1516 弄"
      },
      {
        date: "2016-05-03",
        name: "20",
        address: "上海市普陀区金沙江路 1516 弄"
      },
      {
        date: "2016-05-03",
        name: "20",
        address: "上海市普陀区金沙江路 1516 弄"
      },
      {
        date: "1212121212",
        name: "20",
        address: "上海市1212321321321普陀区金沙江路 1516 弄"
      }
    ],
    value: "Beijing",
    options: [
      {
        value: "Beijing",
        label: "摄像头"
      },
      {
        value: "Shanghai",
        label: "检控"
      }
    ],
    buttomData: [
      {
        text: "登记人数",
        value: "000895",
        color: "#FFEA1D"
      },
      {
        text: "离开人数",
        value: "002195",
        color: "#FF762D"
      },
      {
        text: "进入人数",
        value: "002895",
        color: "#23FFC1"
      },
      {
        text: "陌生人数",
        value: "000095",
        color: "#E94C58"
      }
    ],
    cardList: [
      {
        text: "住宅",
        value: "21620"
      },
      {
        text: "酒店",
        value: "21620"
      },
      {
        text: "商铺",
        value: "21620"
      },
      {
        text: "医院",
        value: "21620"
      },
      {
        text: "停车场",
        value: "21620"
      },
      {
        text: "学校",
        value: "21620"
      }
    ]
  }),
  methods: {
    // 初始化地图
    handler({ BMap, map }) {
      // var point = new BMap.Point(113.262851, 23.253817);
      // map.centerAndZoom(point, 18); // 将point点放入map中，展示在页面中心展示，8=缩放程度
      map.enableScrollWheelZoom(); // 开启滚动鼠标滑轮
      // ##调用划分行政区域方法 [boundariesValue]由于我这个项目不是在互联网所以区域经纬度是写死的，如果你们在互联网的开发的话，就调用bdary.get这个方法就行。
      var bdary = new BMap.Boundary();
      let boundariesValue = [
        "113.265461,23.248212;113.264791,23.248973;113.258638,23.260022;113.259707,23.259955;113.262222,23.260155;113.263749,23.259872;113.263767,23.259889;113.265546,23.259565;113.267783,23.260096;113.268205,23.258968;113.267657,23.256162;113.268358,23.254801;113.266687,23.252452;113.266175,23.25021;113.265465,23.248268;"
      ];
      // let boundariesValue = [];
      bdary.get("广州市白云区", function(rs) {
        //获取行政区域
        // map.clearOverlays(); //清除地图覆盖物
        console.log("----------", rs);
        // boundariesValue = rs.boundaries;
        var count = boundariesValue.length; //行政区域的点有多少个
        if (count === 0) {
          alert("未能获取当前输入行政区域");
          return;
        }
        var pointArray = [];

        for (var i = 0; i < count; i++) {
          var ply = new BMap.Polygon(boundariesValue[i], {
            strokeWeight: 8, //设置多边形边线线粗
            strokeOpacity: 0, //设置多边形边线透明度0-1
            StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
            strokeColor: "red", //设置多边形边线颜色
            fillColor: "#99d7ff", //设置多边形填充颜色
            fillOpacity: 0.01 //设置多边形填充颜色透明度0-1 注：标红的地放你们可以去掉看一下效果，自己体验一下
          }); //建立多边形覆盖物
          map.addOverlay(ply); //添加覆盖物
          map.setViewport(ply.getPath()); //调整视野
        }
        map.setViewport(pointArray); //调整视野

        map.setMapStyle({ style: "midnight" });
        // 点击事件获取经纬度
        map.addEventListener("click", function(e) {
          console.log(e.point.lng, e.point.lat);
        });
      });
    },
    // 设置表格样式
    rowStyle() {
      let rowStyle = {};
      rowStyle.background = "#0E1348";
      rowStyle.color = "#fff";
      rowStyle.fontSize = "0.7vw";
      rowStyle.height = "100%";
      return rowStyle;
    },
    // 设置表格头部样式
    getRowClass({ rowIndex }) {
      if (rowIndex == 0) {
        return "background-color:#3478FF;color:#fff;text-algin:center;font-size:0.8vw;";
      } else {
        return " ";
      }
    }
  }
};
</script>
 
<style lang="less">
.flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #090e27 !important; /*替换为你需要的颜色，觉得优先级不够就加!important*/
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #212121 !important;
}

.el-scrollbar {
  height: auto !important;
  width: auto !important;
}

.el-scrollbar__wrap {
  overflow: scroll !important;
  height: 100% !important;
}
.el-select-dropdown__wrap {
  max-height: 100% !important;
}

.el-select-dropdown__item {
  font-size: 1vw !important;
  padding: 0 20px !important;
  position: relative !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #606266 !important;
  height: 1.5vw !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.box {
  background: #0e1348;
  border: 0.2vw solid #225bc3;
  border-radius: 0.5vw;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 0.8vw;
}
.index-title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #cbd7fa;
  font-size: 0.8vw;
  padding: 0.6vw;
}
.wyMap-b {
  height: 100%;
  position: relative;
  .map {
    width: 100%;
    height: 100%;
  }
  .nltj-box {
    .box;
    top: 14%;
    left: 2%;
    width: 33%;
    height: 16%;
    position: fixed;
    text-align: left;
    font-size: 0.8vw;
    color: rgba(203, 215, 250, 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    .item-box {
      width: 27%;
      display: flex;
      flex-direction: column;
      padding-bottom: 0.5vw;
      padding-right: 0.5vw;
      padding-left: 1.5vw;
      .title {
        margin-bottom: 0.4vw;
      }
      .value {
        width: 7vw;
        font-size: 1.5vw;
        color: #fff;
        background: #172274;
        border-radius: 5px;
        padding-left: 0.9vw;
      }
    }
  }

  .rktj-box {
    .box;
    top: 33%;
    left: 2%;
    width: 33%;
    height: 18%;
    position: fixed;
    text-align: left;
  }

  .hjly-box {
    .box;
    top: 54%;
    left: 2%;
    width: 33%;
    height: 20%;
    position: fixed;
    text-align: left;
    .hjly-table {
      width: 100%;
      height: 78%;
      margin-top: 7%;
      border-radius: 0.5vw;

      .cell {
        height: 1.5vw !important;
        .flex;
      }

      .el-table__body-wrapper {
        overflow: auto;
        height: 77%;
        position: relative;
      }
    }
    .hjly-select {
      position: absolute;
      top: 2.7vw;
      right: 3.5vw;

      .el-select {
        width: 5vw;

        input {
          height: 1.5vw;
          font-size: 0.8vw;
        }
      }
    }
  }

  .jdjz-box {
    .box;
    top: 77%;
    left: 2%;
    width: 33%;
    height: 20%;
    position: fixed;
    text-align: left;
    .hjly-table {
      width: 100%;
      height: 78%;
      margin-top: 7%;
      border-radius: 0.5vw;

      .cell {
        height: 1.5vw !important;
        .flex;
      }

      .el-table__body-wrapper {
        overflow: auto;
        height: 77%;
        position: relative;
      }
    }
    .hjly-select {
      position: absolute;
      top: 2.7vw;
      right: 1.8vw;

      .el-select {
        width: 4vw;

        input {
          height: 1.5vw;
          font-size: 0.8vw;
        }
      }
    }
  }

  .zdcs-box {
    .box;
    top: 77%;
    left: 37%;
    width: 30%;
    height: 20%;
    position: fixed;
    text-align: left;
  }

  .clzk-box {
    .box;
    top: 77%;
    left: 69%;
    width: 29%;
    height: 20%;
    position: fixed;
    text-align: left;
  }
}
</style>